<template>
  <div id="app">
    <!-- 
      el-form:element-ui提供表单组件 类似于html中的form标签
      el-form的 label-width属性是用来设置每个表单域标题的宽度 (会对所有的表单域生效)
      el-form-item:表单域,表单中的每一行
      el-form-item 的label属性是用来设置表单域的标题的
     -->
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="80px"
      status-icon
    >
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="code">
        <el-input v-model="form.code" placeholder="请输入验证码"></el-input>
      </el-form-item>
      <el-form-item>
        <!-- .native 可以给组件的最外层的html标签绑定原生事件 -->
        <!-- <el-button type="primary" @click="login">登录</el-button> -->
        <!-- 组件想要绑定事件,组件内部是不是必须要做一件事 this.$emit('test') -->
        <!-- <hm-button @click="test" >登录</hm-button> -->
        <hm-button @click.prevent.native="login" >登录</hm-button>
        
        <!-- 说明el-button内部做了:this.$emit('click') -->
        <el-button @click="resetForm('form')" >重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import HmButton from './components/HmButton.vue'
export default {
  name: 'App',
  components:{
    HmButton
  },
  data() {
    return {
      form: {
        mobile: '',
        code: ''
      },
      rules: {
        // trigger:只支持change和blur
        mobile: [
          {
            required: true,
            message: '请输入手机号码',
            trigger: ['change', 'blur']
          },
          {
            pattern: /^1[3-9]{1}\d{9}$/,
            message: '手机格式不正确',
            trigger: ['change', 'blur']
          }
        ],
        code: [
          { required: true, message: '验证码不能为空', trigger: 'blur' },
          // {
          //   pattern: /^\d{6}$/,
          //   message: '验证码必须为6位数字',
          //   trigger: 'blur'
          // }
          // validator: validateCode:可以是函数或者方法(js中方法指的是对象中的方法)
          { validator: this.validateCode, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 使用自定义校验的时候
    validateCode(rule, value, callback) {
      //console.log('rule', rule)
      //console.log('value', value)

      if (!/^\d{6}$/.test(value)) return callback(new Error('验证码必须为6位!'))

      callback()
    },
    login() {
      this.$refs.form.validate((valid) => {
        // console.log(valid)
        if (valid) {
          // 提交请求
          console.log('可以提交表单了')
        }
      })
    },
    resetForm(formName){
      // resetFields 不仅可以重置表单中的内容,还可以重置表单的错误校验
       this.$refs[formName].resetFields()
    },
    test(){
      console.log('点击了')
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
